<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="组织信息" name="first"  v-loading="loading">
        <!-- 信息展示 -->
        <el-card class="box-card" v-if="orgId">
              <div slot="header" class="clearfix">
              <span>{{sonInvi.name}}</span>
            </div>
            <div  class="text item">
              组织邀请码
              <span class="itemHolder">{{sonInvi.inviteCode || '无'}}</span>
            </div>
            <div  class="text item">
              下级组织数
              <span class="itemHolder">{{sonInvi.sonNum || 0}}</span>
            </div>
            <div  class="text item">
              本组织人数
              <span class="itemHolder">{{userNum}}</span>
            </div>
            <div  class="text item">
              组织总人数
              <span class="itemHolder">{{allUserNum}}</span>
            </div>
        </el-card>
        <el-card v-if="!orgId">
          <div  class="text item">
              暂无人员！
            </div>
        </el-card>
        </el-tab-pane>

         <el-tab-pane label="人员信息" name="second">
           <el-container>
              <el-header style="padding-left:0px;height:30px">
                <el-button size="mini" type="primary" @click="addCtrl">添加人员<i class="el-icon-zoom-in el-icon--right"></i></el-button>
                <el-button size="mini" type="primary">人员导入<i class="el-icon-upload2 el-icon--right"></i></el-button>
                   <!-- 选择框 -->
                 
                    <el-autocomplete
                      class="inline-input"
                      style="margin-left: 10px;width:100px"
                      size="mini" 
                      v-model="property"
                      :fetch-suggestions="propertyMethod"
                      placeholder="岗位属性"
                      @select="propertyChange"
                      value-key="name"
                    ></el-autocomplete>

                  <el-select
                    v-model="usable"
                    style="margin-left: 10px;width:100px"
                    placeholder="状态"
                    size="mini"
                    @change="statusMethod"
                    >
                    <el-option
                      v-for="item in options"
                      :key="item.usable"
                      :value="item.value"
                      >
                    </el-option>
                  </el-select>
                  <el-input
                    placeholder="请输入姓名/号码"
                    size="mini"
                    style="width:200px;margin-left:10px"
                    v-model="telNameIpt"
                    >
                    <i slot="prefix" class="el-input__icon el-icon-search"></i>
                  </el-input>
              </el-header>
              <el-main style="padding-left:0px;">
                 <el-table
                  :data="tableData"
                  border
                  style="width: 100%"
                  >
                  
                  <el-table-column
                    prop="userName"
                    label="姓名"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="tel"
                    label="号码"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="stationName"
                    label="岗位属性"
                    align="center">
                  </el-table-column>
                  <el-table-column
                    prop="handle"
                    label="操作"
                    align="center">
                    <template slot-scope="scope">
                      <el-button @click="edit(scope.row)" type="text" size="medium">编辑</el-button>
                      <el-button v-if="scope.row.status == 'n'" type="text" size="medium" style="color:#909399;">离岗</el-button>
                      <el-button v-if="scope.row.status == 'y'" type="text" size="medium" @click="overWork(scope.row)">在岗</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column
                    label="状态"
                    align="center">
                      <template slot-scope="scope">
                       <el-button 
                        :type="scope.row.usable == 'unact' ? 'info' : 'success'" 
                        size="small" 
                        @click="statusReset(scope.row)">{{scope.row.usable == 'unact' ? '冻结' : '启用'}}</el-button>
                    </template>
                  </el-table-column>
                  <!-- <el-table-column
                    prop="move"
                    label="排序"
                    align="center">
                    <template slot-scope="scope">
                      <span class="handleSort">置顶</span>
                      <span class="handleSort">上移</span>
                      <span class="handleSort">下移</span>
                    </template>
                  </el-table-column> -->
                </el-table>
              </el-main>
                <!-- 分页 -->
      <pager ref="pager"  v-on:listenPagerEvent="getPagerData" :requestParams="requestParams" :requestUrl="requestUrl"></pager>
      <addEditpersonDialog 
      v-on:closeAddEditDialog="closeAddEditDialog" 
      v-on:reloadData="reloadData"
      :ShowAddEditpersonDialog="ShowAddEditpersonDialog" 
      :formData="formData"></addEditpersonDialog> 
           </el-container>
          </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import {findUserNum,findPageList,findStationList,dimission,statusReset} from '../../tool/config'
import Pager from "../common/pager.vue"
import addEditpersonDialog from "../common/addEditpersonDialog.vue"

export default {
  components:{Pager,addEditpersonDialog},
  props:{
    orgId:'',
    sonInvi:Object,//接收
    required: true,
  },
  data: function() {
    return {
      activeName:'first',
      tabName:'',
      userNum:0,
      allUserNum:0,
      loading:false,
      option:{
        page:1,//页数
        rows:10,//个数
      },
      requestParams:{
        orgId:'',
        usable:'',
        stationId:'',
        tel:'',
        userName:'',
        reload:'',
        status:''
      },
      requestUrl:findPageList,
      ShowAddEditpersonDialog:false,
      formData:{
        data:{},
        title:''
      },
      propertyList:[],//岗位属性可选列表
      options: [{
          value: '全部',
          usable: ''
        }, {
          value: '已冻结',
          usable: 'unact'
        }, {
          value: '已启用',
          usable: 'on'
        }],
        property: '',
        usable: '',
        tableData:[],
        telNameIpt:'',//电话姓名输入框
    }
  },
  methods: {
    //获取分页数据
    getPagerData(data,pageSize,pageNum){
          console.log(data)
          this.tableData = data;
    },
    //编辑或添加之后刷新数据
    reloadData(res){
      if(res){
        this.requestParams.reload = Math.random();//重载
      }
    },
    handleClick(tab, event) {
        if(tab.name == 'second'){
          this.tabName = tab.name;
        }
      },
      //添加成员
    closeAddEditDialog(closeDialog){
      this.ShowAddEditpersonDialog = closeDialog;//弹框是否关闭了
    },
    addCtrl(){
      this.formData.title = '添加成员';
      this.formData.data = {};
      this.ShowAddEditpersonDialog = true;

    },
    getUsrList(option,callback){
      findPageList(option).then((res)=>{
        if(res.code == 0){
          callback(res)
        }
      })
    },
    edit(row){
      this.formData.title = '编辑成员';
      this.formData.data = row;
      this.ShowAddEditpersonDialog = true;

    },
    overWork(row){

       this.$confirm('确认对该人员进行离岗操作吗', '离岗确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          dimission({id:row.id}).then(res=>{
            if(res.code == 0){
              this.requestParams.reload = Math.random();//重载数据
              this.$message({
              type: 'success',
              message: '操作成功!'
              });
            }else{
              this.$message({
              type: 'warning',
              message: res.msg
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
    },
    statusReset(row){
      const title = row.usable == 'on' ? '账号冻结' : '账号启用';
      const content = row.usable == 'on' ? '账号冻结后将无法正常登录APP，确认冻结该人员账号吗？' : '确认启用该人员账号吗？';
       this.$confirm(content, title, {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const st = row.usable == 'unact' ? 'on' : 'unact';
          statusReset({id:row.userId,status:st}).then(res=>{
            if(res.code == 0){
              this.requestParams.reload = Math.random();//重载
              this.$message({
              type: 'success',
              message: '操作成功!'
              });
            }else{
              this.$message({
              type: 'warning',
              message: res.msg
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消操作'
          });
        });
    },
    //获取岗位列表
    getStationList(name){
      findStationList({name:name}).then(res=>{
        if(res.code == 0){
          this.propertyList = res.response;
        }
      })
    },
    //岗位输入框
    propertyMethod(string,cb){
        cb(this.propertyList);
    },
    statusMethod(data){
      
      if(data == '已冻结' || data == '已启用'){
      this.requestParams.usable = data == '已冻结' ? 'unact' : 'on';
      }else{
        this.requestParams.usable = '';
      }
    },
    propertyChange(data){
        this.requestParams.stationId = data.id;
    }
  },
    mounted(){

    },
  watch:{
    //监听菜单被选中
    orgId:function(newVal,oldVal){
      if(newVal != oldVal && newVal!=''){
        //组织信息
        findUserNum({orgId:this.orgId}).then((res)=>{
            if(res.code == 0){
              this.allUserNum = res.response.allUserNum;
              this.userNum = res.response.userNum;
            }
        })
        //人员信息
          this.requestParams.orgId = this.orgId;
      }
    },
    //岗位属性输入监听
    property(newVal,oldVal){
      if(newVal != oldVal){
        this.getStationList(newVal);
        if(newVal == ''){
          this.requestParams.stationId = ''
        }
      }
    },
    telNameIpt(newVal,oldVal){
      if(newVal != oldVal){
        //输入数字 还是名字
        if(newVal != ''){
            var a = newVal * 1;
            if(a){
              this.requestParams.userName = '';
              this.requestParams.tel = newVal;
            }else{
              this.requestParams.userName = newVal;
              this.requestParams.tel = '';
            }
        }else{
          this.requestParams.userName = '';
          this.requestParams.tel = '';
        }
      }
    }
  },
}
</script>

<style scoped>

.itemHolder{
  display: inline-block;
  border: 1px solid #eee;
  height: 30px;
  width: 300px;
  line-height: 30px;
  text-align: center;
  margin-bottom: 10px;
  margin-left: 30px;
}
.el-card__body{
  min-height: 100%;
}
.handleSort{
  font-size: 14px;
}
.handleSort:hover{
  text-decoration: underline;
  cursor: pointer;
  color: red;
}

.el-table_1_column_1 td{
    padding: 5px 0!important;
}

</style>